<template>
  <view class="bg-circle">
    <canvas
      class="bgcanvas"
      id="bg-canvas"
      type="2d"
      canvas-id="bg-canvas"
    ></canvas>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      canvas: null,
      ctx: null,
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
    this.drawCanvas();
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    // 生成
    initCanvas() {
      return new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#bg-canvas')
          .fields({ node: true })
          .exec((res) => {
            const canvas = res[0].node;
            const ctx = uni.createCanvasContext('bg-canvas', this);
            this.canvas = canvas;
            this.ctx = ctx;
            resolve({
              canvas,
              ctx,
            });
          });
      });
    },

    drawCanvas() {
      const _that = this;

      this.getSystem()
        .then((info) => {
          w = info.windowWidth;
          h = info.windowHeight;
          return this.initCanvas();
        })
        .then(() => {
          this.canvas.width = w;
          this.canvas.height = h;
        });
    },
    getSystem() {
      return new Promise((resolve, reject) => {
        uni.getSystemInfo({
          success: (result) => {
            resolve(result);
          },
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.bg-circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  .bgcanvas {
    width: 100vw;
    height: 100vh;
  }
}
</style>
